<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>权限管理</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/amazeui.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/app.css">
<link
	href="${pageContext.request.contextPath}/style/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/style/layui/css/layui.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/style/js/amazeui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
<style type="text/css">
label {
	font-family: "Times New Roman", Times, serif;
	font-size: 15px;
	color: #000000;
}

.table {
	width: 680px;
}

.table thead tr {
	width: 680px;
	display: block;
}

.table tfoot {
	display: block;
}

.table tbody {
	width: 680px;
	display: block;
	height: 350px;
	overflow: auto;
}


</style>
</head>

<body>
	<div
		style="width:100%;background-color:#F8F8FF;height:100%;position: absolute;top:1px;left:1px">

	</div>
	<div id="tablediv"
		style="height:60%;width:100%;position: absolute;top:1px;left:10px;">
		<table class="layui-table table" id="" border="1px">
			<thead>

				<tr style="display:block">
					<th width="200px"><input id='allid' type='checkbox'></th>
					<th width="38%">编号</th>
					<th width="32%">角色名</th>
					<th width="55%">状态</th>
				</tr>
			</thead>
			<tbody id="roletable">
			</tbody>
			<tfoot>
				<div style="position: absolute;top:420px;left:270px">
					<button id="sub"  class="am-btn am-btn-primary am-btn-xs"
						type="button">
						<i class="glyphicon glyphicon-ok"></i>确定
					</button>
				</div>
			</tfoot>


		</table>


	</div>





</body>
<script type="text/javascript">
	$(document).ready(function() {

		//ajax请求后台数据
		getjihualist();


	});


	//ajax请求后台数据
	function getjihualist() {
		$.ajax({
			type : "post",
			async : false,
			dataType : "json",
			url : "${pageContext.request.contextPath}/user/userrolelist",
			
			success : function(data, status) {
				gettable(data.root);
				startAllAppoint = data.currentResult;//当前页数(后台返回)
				dataLength = data.total;//数据总条数
			}
		});

	}

	function gettable(data) {
		var s = "";
		$.each(data, function(v, o) {
			//console.log(o);
			s += "<tr><td width='10px'><input ";
			if (o.checks == true) {
				s += " checked='checked' type='checkbox'";
			} else {
				s += " type='checkbox'";
			}
			s += " value=" + o.roleId + " id='box' name='mycheckbox'></td><td width='229px'>"
					+ o.roleId + "</td>";
			s += "<td width='190px'>" + o.roleName + "</td>";
			if (o.roleState == 1) {
				s += "<td  width='162px'>正常</td>";
			} else {
				s += "<td  width='162px'>关闭</td>";
			}
		});

		if (data.length > 0) {
			$("#roletable").html(s);
		} else {
			$("#page").hide();
			$("#roletable")
					.html(
							"<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
		}

	}
	layui.use(['layer'],function(){
		var layer=layui.layer;
	});

	var isCheckAll = false;
	$("#allid").click(function() {
		if (!isCheckAll) {
			$("input[type='checkbox']").each(function() {
				$("input[type='checkbox']").prop("checked", true);

			});
			isCheckAll = true;
		} else {
			$("input[type='checkbox']").each(function() {
				$("input[type='checkbox']").prop("checked", false);
				isCheckAll = false;
			});
		}
	});

	$("input[type='checkbox']").click(function() {
		if ($(this).is(':checked')) {
		} else {
			isCheckAll = false;
			$("#allid").prop("checked", false);

		}
	});

	$("#sub").click(function() {
		var idvalue = new Array();
		$.each($('input:checkbox:checked'), function() {
			// alert($('input[type=checkbox]:checked').length+","+$(this).val());
			idvalue.push($(this).val());
		});
		layer.open({
			title : '分配用户权限',
			content : '确认分配用户权限？',
			btn : [ '确认', '取消' ],
			yes : function(index, layero) {
				var index = parent.layer.getFrameIndex(window.name)

				$.ajax({
					type : "post",
					url : "${pageContext.request.contextPath}/user/roleuser",
					data : {
						ids : idvalue
					},
					dataType : "text",
					traditional : true,//这里设为true就可以了
					success : function(res) {
						if (res == "success") {
							layer.alert('用户权限修改成功', {
								skin : 'layui-layer-molv' //样式类名
								,
								closeBtn : 0,
								end : function() {
									location.reload();
								}
							}, function() {
								parent.layer.close(index);
							});
						} else {
							layer.alert('用户权限修改失败', {
								skin : 'layui-layer-molv' //样式类名
								,
								closeBtn : 0
							}, function() {
								parent.layer.close(index);
							});
						}
					},

				});
			}
		});

	});
</script>



</html>
